<template>
  <!-- 用户列表 -->
  <nav class="box">
    <div class="toppage">
      <el-input
        v-model="searchValue"
        placeholder="请输入关键词 如 姓名/手机号/身份证号"
      ></el-input>
      <!-- @keyup.enter.native="search" -->
      <el-button type="primary" icon="el-icon-search" @click="search()"
        >搜索</el-button
      >
    </div>
    <!-- 
    <div class="labelpage">
      <span>搜索条件 :</span>
    </div> -->

    <!-- 表格 -->
    <div class="formPage">
      <!-- 表格数据 -->
      <el-table
        :data="nowData"
        :header-cell-style="{ background: '#eef1f6', color: '#000' }"
        style="width: 100%"
        max-height="100%"
      >
        <el-table-column prop="id" label="用户编号"> </el-table-column>
        <el-table-column prop="name" label="姓名"> </el-table-column>
        <el-table-column prop="phone" label="手机号" width="200">
        </el-table-column>
        <el-table-column prop="sex" label="性别"> </el-table-column>
        <el-table-column prop="identityCard" label="身份证号" width="200">
        </el-table-column>
        <el-table-column prop="profession" label="职业信息"> </el-table-column>
        <el-table-column prop="education" label="学历"> </el-table-column>
        <el-table-column prop="isAuth" label="是否认证">
          <template slot-scope="scope">
            {{ scope.row.isAuth == 1 ? "是" : "否" }}
          </template>
        </el-table-column>
        <el-table-column prop="roleId" label="是否房东">
          <template slot-scope="scope">
            {{ scope.row.roleId == 1 ? "是" : "否" }}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <!-- @click="" -->
            <el-button
              @click="handleEdit(scope.$index, scope.row)"
              type="text"
              size="small"
            >
              查看详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 租客详情页面 -->
      <el-dialog title="租客详情" :visible.sync="dialogTableVisible">
        <nav id="boxPage">
          <div class="boxPagez">
            <div class="boxPagev">
              <div class="divlist">
                <ul>
                  <div><span>|</span>基本信息</div>
                  <li>
                    <div>姓名：{{ gridData.name }}</div>
                  </li>
                  <li>
                    <div>性别：{{ gridData.sex }}</div>
                  </li>
                  <li>
                    <div>手机号：{{ gridData.phone }}</div>
                  </li>
                </ul>
              </div>

              <div class="divmst">
                <ul>
                  <!-- <li><div>{{item.namex}}</div></li> -->
                  <li>
                    <div>籍贯：{{ gridData.nativePlace }}</div>
                  </li>
                  <li>
                    <div>身份证号码：{{ gridData.identityCard }}</div>
                  </li>
                </ul>
              </div>
            </div>

            <div class="boxPages"></div>
          </div>

          <div>
            <ul>
              <div><span>|</span>认证信息</div>
              <li>
                <div>职业信息：{{ gridData.profession }}</div>
              </li>
              <li>
                <div>芝麻信用：{{ gridData.creditScore }}</div>
              </li>
              <li>
                <div>银行卡：{{ gridData.bankCard }}</div>
              </li>
              <li>
                <span>人脸识别信息：</span>
                <span>{{ gridData.faceImage }}</span>
              </li>
            </ul>
          </div>
        </nav>
      </el-dialog>
      <!-- 租客详情页面 -->
      <!-- 表格数据 -->

      <!-- 分页 -->
      <el-pagination
        class="numberpage"
        background
        layout="prev, pager, next"
        :total="this.count"
        @current-change="changePage"
        :page-count="nowPage"
      >
      </el-pagination>
      <!-- 分页结束 -->
    </div>
    <!-- 表格结束 -->
  </nav>
</template>
<script>
// import { Select } from "element-ui";
import { queryBllUser } from "@/api/UserList";
export default {
  name: "userlist",
  components: {},
  computed: {
    nowData() {
      let qishi = (this.nowPage - 1) * 10;
      return this.userList.slice(qishi, qishi + 10);
    },
  },
  data() {
    return {
      page: 1,
      limit: 10,
      count: 0,
      searchValue: "",
      searchResult: [],
      userList: [],
      nowPage: 1,
      gridData: [],
      dialogTableVisible: false,
      formLabelWidth: "120px",
    };
  },

  methods: {
    //  搜索
    search() {
      let searchResult = this.userList.filter(
        (item) =>
          !this.searchValue ||
          item.name.includes(this.searchValue) ||
          item.phone.includes(this.searchValue) ||
          item.identityCard.includes(this.searchValue)
      );
      this.userList = searchResult;
    },
    // 搜索

    //  请求后端数据
    selectData(data) {
      queryBllUser(data).then((res) => {
        console.log(res);
        if (res.msg == "请求成功!") {
          this.userList = res.data;
          this.count = res.count;
        }
      });
    },
    // 获取到数据并分页

    //  每页10条
    maxPage() {
      return Math.ceil(this.count / 10);
    },

    // 页码
    changePage(num) {
      this.page = num;
      let data = {
        page: this.page,
        limit: this.limit,
      };
      this.selectData(data);
    },
    // 获取到数据并分页

    //  请求后端数据

    //  查询详情弹出界面
    handleEdit(index, row) {
      this.dialogTableVisible = true;
      this.gridData = row;
    },
    //  查询详情弹出界面
  },

  created() {
    this.selectData({
      page: this.page,
      limit: this.limit,
    });
  },
  updated() {
    this.maxPage();
  },
};
</script>


<style lang="less">
nav {
  // padding: 0 30px 0 30px;
  .toppage {
    margin-bottom: 20px;
    .el-input {
      width: 350px;
      margin: 0 50px 0 0px;
      color: #000;

      //  .el-input__inner{
      //     width: 400px;
      //     height: 30px;
      // }
    }
  }

  .labelpage {
    width: 100%;
    height: 60px;
    background-color: #f4f6f5;
    margin: 20px 0 20px 0;

    span {
      //   color: #F4F6F5;
      line-height: 60px;
      margin-left: 10px;
    }
  }

  .formPage {
    width: 100%;
    height: 100%;
    .el-input.style {
      height: 100%;
    }

    // 表格样式
    .el-table {
      .el-table th .el-table__cell {
        background-color: aqua;
        height: 70px;
      }
    }
    // 表格样式

    // 弹框样式
    .el-dialog {
      .el-dialog__header {
        border-bottom: 1px rgb(221, 216, 216) solid;
      }
      #boxPage {
        width: 100%;
        height: 400px;
        // background-color: aqua;
        li {
          list-style: none;
          margin: 10px 0 10px 0;
        }

        .boxPagez {
          width: 100%;
          height: 150px;
          // background-color: chocolate;

          .boxPagev {
            width: 70%;
            height: 150px;
            // background-color: blueviolet;
            float: left;

            .divlist {
              width: 40%;
              height: 150px;
              // background-color: blue;
              float: left;
            }

            .divmst {
              width: 60%;
              height: 150px;
              // background-color: chartreuse;
              float: right;
            }
          }

          .boxPages {
            width: 20%;
            height: 200px;
            // background-color: red;
            float: right;
          }
        }
      }
    }
    // 弹框样式
    .numberpage {
      margin-top: 30px;
      float: right;
    }
  }
}
</style>